<template>
	<div>
		<transition name="slide-top">
		<div class="choose-shop" v-if="isShow">		
	  	<div class="choose-shop-main">
	  		<div class="choose-shop-top bottom-1px">
	  			<div class="choose-shop-img">
	  				<span class="img-holder"><img class="obj-cover" :src="data.goodsCover"></span>
	  			</div>
	  			<div class="top-content">
	  				<h3 class="name">{{ data.goodsName }}</h3>
	  				<span class="price">¥{{ filterPrice | toDecimal }}</span>
	  			</div>
	  			<span class="close" @click="toogleChoosePen"><x-icon type="ios-close-outline" size="24"></x-icon></span>
	  		</div>
	  		<div class="auto-scroll">
		  		<div class="choose-shop-middle">
		  			<div class="choose-part nub-desc">
		  				<span class="choose-part-hd">库存</span>
		  				<div class="choose-part-bd">{{ filterStock }}件</div>
		  			</div>
		  			<div class="choose-part nub-desc" v-if="data.attribute.length > 0">
		  				<span class="choose-part-hd">规格</span>
		  				<div class="choose-part-bd">{{ attributeText }}</div>
		  			</div>
		  			<div class="choose-part nub-desc">
		  				<span class="choose-part-hd">数量</span>
		  				<div class="choose-part-bd">
		  					<div class="cartcontrol"> 	
									<div class="cart-decrease" @click.stop="decrease">-</div>   
							    <div class="cart-count">{{ count }}</div>
							    <div class="cart-add" @click.stop="increment">+</div>
							  </div>			
		  				</div>
		  			</div>
		  			<div style="height: 10px;"></div>
		  			<div class="choose-part nub-desc" v-for="(item,index) in data.attribute">
		  				<span class="choose-part-hd">{{ item.attrName }}</span>
		  				<div class="choose-part-bd">
		  					<div class="product-color">
		  						<span class="color-item" :class="{ 'active': selSkuArr[index] == label.v }" v-for="(label,idx) in item.attrValues" @click="selectLabelsItem(item, index, label)">{{ label.v }}</span>
		  					</div>
		  				</div>
		  			</div>
		  		</div>
				</div>
	  	</div>		  
	  </div>
	  </transition>
	  <div class="flick-menu-btn" v-if="isShow">
	  	<span class="yellow-color add_cart" @click="addToCart">加入购物车</span>
	  	<span class="red-color buy_product" @click="addToBuy">立即购买</span>
	  </div>
	  <transition name="fade">
	  	<div class="mask" v-if="isShow" @click="toogleChoosePen"></div>
	  </transition>
  </div>
</template>

<script>
import { mapActions, mapGetters }	from 'vuex'
import Cartcontrol from '@/components/public/Cartcontrol'
import http from '@/utils/http'
import { toDecimal } from '@/utils/mUtils'

export default {
	props: {
		data: {
			type: Object,
			default: ''
		}
	},
	components: {
		Cartcontrol
	},
  data () {
  	return {
  		isShow: false,
  		nowIndex: 0,
  		count: 1,
  		attrFilter: [],
  		chooseSku: [],
  		selSkuArr: []
  	}
  },
  computed: {
  	...mapGetters(['userInfo']),
  	// 选择对应商品属性的价格
  	filterPrice () {
  		if (!this.skuResult) return this.data.price
  		return this.skuResult.price
  	},
  	// 过滤库存
  	filterStock () {
  		if (this.data.seckillStock && !this.skuResult) return this.data.seckillStock
  		if (!this.skuResult) return this.data.totalStock
  		return this.skuResult.stock
  	},
  	skuResult () {
  		let item = this.data.skuResult.find(n => JSON.stringify(n.skuArr) == JSON.stringify(this.chooseSku))
  		console.log(item)
  		return item
  	},
  	noSelAttrs () {
  		let arr = []
  		if (this.data.attribute) {
	  		this.data.attribute.forEach(item => {
	  			arr.push(item.attrName)
	  		})
  		}
  		return arr
  	},
  	attributeText () {
  		if (this.selSkuArr.length > 0 ) {
  			if (this.noSelAttrs.length == 0) {
  				return `已选 ${this.selSkuArr.join(',')} ${this.count}件`
  			}
  			return `选择 ${this.noSelAttrs.join(',')}`			  			
  		}else {
  			return `选择 ${this.noSelAttrs.join(',')}`
  		}
  	},
  },
  methods: {
  	...mapActions(['getCartLen']),
  	selectLabelsItem (item, index, lable) {
  		this.chooseSku = []
  		this.attrFilter.length = this.data.attribute.length
  		this.selSkuArr.length = this.data.attribute.length
  		this.attrFilter[index] = JSON.parse(JSON.stringify(item))
			this.attrFilter[index].attrValues = lable.v
			this.selSkuArr[index] = lable.v
			this.selSkuArr = this.selSkuArr.concat([])
			console.log(this.attrFilter)
  		this.attrFilter.forEach(item => {
  			this.chooseSku.push({ name: item.attrName, value: item.attrValues })
  		})
			// 查找未选择的商品属性名称
			let idx = this.noSelAttrs.findIndex(n => n == this.attrFilter[index].attrName)
			this.noSelAttrs.splice(idx, 1)
			this.$emit('onChoose', this.attributeText)
			if (this.skuResult) {
				this.$emit('selSkuId', this.skuResult._id)
			}
			
  	},
  	increment () {
  		this.count++
  		this.$emit('onCount', this.count)
  		this.$emit('onChoose', this.attributeText)
  	},
  	decrease () {
  		if (this.count == 1) {
  			this.count = 1
  		}else {
  			this.count--
  		}
  		this.$emit('onCount', this.count)
  		this.$emit('onChoose', this.attributeText)
  	},
  	addToCart () {
  		//this.$store.dispatch('add',{ data:this.data, amount: this.count, type: 'cart' })
  		if (!this.userInfo) {
  			this.$router.push({ path: '/login' })
  			return
  		}
  		let params = {
  			goodsId: this.data._id,
  			skuId: this.skuResult._id,
  			type: 'add',
  			isHideLoad: true
  		}
  		http.post('/api/v1/cart', params, false, res => {
  			if (res.status == 1) {
  				this.isShow = !this.isShow 				
  				this.$vux.toast.show({
		  			text: '加入购物车成功~',
		  			type: 'success',
		  			width: 'auto',
		  			position: 'middle'
		  		})
		  		this.getCartLen()
  			}else {
  				this.$vux.toast.show({
		  			text: res.msg,
		  			type: 'warn',
		  			width: 'auto',
		  			position: 'middle'
		  		})
  			}
  		})
  		
  	},
  	addToBuy () {
  		// 判断是否全选商品属性
  		if (this.noSelAttrs.length > 0) {
  			this.$vux.toast.show({
  				type: 'warn',
  				text: `请选择商品${this.noSelAttrs[0]}!`,
  				width: 'auto',
  				position: 'middle'
  			})
  			return
  		}
  		if (!this.userInfo) {
  			this.$router.push({ path: '/login' })
  			return
  		}
  		let arr = [] 
  		arr.push({
  			goodsId: this.data._id,
  			goodsName: this.data.goodsName,
  			goodsCover: this.data.goodsCover,
  			price: this.data.price,
  			quantity: this.count
  		})
  		if (this.data.goodsId) {
  			arr[0].goodsId = this.data.goodsId
  		}
  		if (this.skuResult) {
  			arr[0].skuId = this.skuResult._id
  			arr[0].price = this.skuResult.price
  		}
  		this.$store.dispatch('saveBuyConfirm', arr)
  		this.$router.push({ path: '/order/buyConfirm' })
  	},
  	toogleChoosePen () {
  		this.isShow = !this.isShow
  	}
  },
  filters: {
  	toDecimal (val) {
  		return toDecimal(val)
  	}
  }
}
</script>

<style scoped>
.choose-shop {
	position: fixed;
	bottom: 0;
	width: 100%;
	max-width: 640px;
	background: #fff;
	padding: 10px;
	border-top: 1px solid #f1f1f1;
	z-index: 105;
	height: 70%;
}
.choose-shop-top {
	display: flex;
	padding-bottom: 8px;
}
.choose-shop-img {
	position: relative;
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
	margin-top: -30px;
	border: 1px solid #f1f1f1;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}
.img-holder {
	padding-bottom: 100%;
}
.top-content {
	flex: 1;
	padding: 0 10px 0 8px;
}
.top-content .name {
	font-size: 13px;
	color: #333;
	line-height: 18px;
	height: 36px;
	overflow: hidden;
}
.close svg {
	fill: #999;
}
.price {
	font-size: 16px;
	color: #f23030;
	font-weight: bold;
	padding-top: 8px;
}
.auto-scroll {
	position: absolute;
	top: 79px;
	left: 0;
	right: 0;
	bottom: 42px;
	padding: 0 15px;
	overflow-y: auto;
}
.choose-shop-middle {
	padding: 10px 0;
}
.choose-part {
	display: flex;
	padding-bottom: 10px;
}
.choose-part:last-child {
	padding-bottom: 0;
}
.choose-part-hd {
	flex: 0 0 34px;
	width: 34px;
	font-size: 13px;
	color: #81838e;
	line-height: 24px;
}
.choose-part-bd {
	flex: 1;
	font-size: 13px;
	color: #333;
	line-height: 24px;
	overflow: hidden;
}
.color-item {
	height: 27px;
  border: 1px solid #bfbfbf;
  border-radius: 4px;
  line-height: 25px;
  font-size: 13px;
  color: #232326;
  float: left;
  margin-right: 10px;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 69px;
  max-width: 98%;
  box-sizing: border-box;
  text-align: center;
}
.color-item.active {
	border: 1px solid #f23030;
	color: #f23030;
}
.slide-top-enter-active {
  transition: all .3s;
  transform: translateY(0);
}
.slide-top-leave-active {
  transition: all .3s;
  transform: translateY(100%);
}
.slide-top-enter,
.slide-top-leave {
  transform: translateY(100%);
}
.mask {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	max-width: 640px;
	background: rgba(0, 0, 0, .5);
	z-index: 104;
}
.fade-enter-active {
  transition: all .3s;
  opacity: 1;
}
.fade-leave-active {
  transition: all .3s;
  opacity: 0;
}
.fade-enter,
.fade-leave {
  opacity: 0;
}
.flick-menu-btn {
	position: fixed;
	bottom: 0;
	width: 100%;
	max-width: 640px;
	display: flex;
	z-index: 106;
}
.flick-menu-btn span {
	flex: 1;
	font-size: 14px;
	color: #fff;
	text-align: center;
	background: #f23030;
	padding: 10px 0;
}
span.yellow-color {
	background: #ffb03f;
}
.cartcontrol {
	font-size: 0;
}
.cart-decrease,
.cart-add {
	display: inline-block;
	vertical-align: middle;
	width: 26px;
	height: 24px;
	border: 1px solid #cbcbcb;
	box-sizing: border-box;
	text-align: center;
	line-height: 22px;
	color: #666;
	font-size: 15px;
	font-weight: bold;
}
.cart-count {
	display: inline-block;
	vertical-align: middle;
	border: 1px solid #cbcbcb;
	border-left: 0;
	border-right: 0;
	height: 24px;
	line-height: 22px;
	font-size: 15px;
	color: #333;
	padding: 0 12px;
}
</style>
